<template>
  <van-dialog
    :value="value"
    :show-confirm-button="false"
    :lazy-render="false"
    class-name="snake-modal"
    @close="handleCloseModal"
    v-bind="$attrs"
    >
    <!-- close-on-click-overlay -->
    <div v-if="showHeader" class="snake-title" >
      <span>{{ modalTitle }}</span>
      <div class="snake-close-icon" @click="handleCloseModal"> <van-icon name="cross" /></div>
    </div>
    <div class="snake-modal-content" :style="{height: showHeader ? 'calc(100% - 2.4rem)': '100%'}">
      <slot></slot>
    </div>
  </van-dialog>
</template>

<script>
export default {
  name: 'VSnakeModal',
  model: {
    event: 'change', 
    prop: 'value' //
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    modalTitle: {
      type: String,
      default: ''
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },

  mounted() {
    
  },

  methods: {
    handleCloseModal() {
      this.$emit('change', false)
    },
  },
};
</script>

<style lang="scss">
.snake-modal {
  overflow: visible !important;
  .van-dialog__content {
    height: 100%;
  }
  .snake-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.4rem;
    font-size: 1.2rem;
    line-height: 2.4rem;
    position: relative;
  }
  .snake-close-icon {
    position: absolute;
    right: -0.6rem;
    top: -0.6rem;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    border: 0.1rem solid red;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .snake-modal-content {
    width: 100%;
    margin: auto;
    border-radius: 0.2rem;
    height: calc(100% - 2.4rem);
    overflow: auto;
  }
}
</style>